<!doctype html>
<html lang="en" class="feedback" xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header">
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>预约</title>
</head>
<style>
    body {
        background-color: #fff;
    }

    .mui-content {
        background-color: #fff;
    }

    li {
        float: left;
    }

    .nav-bar.fixed {
        position: fixed;
        top: 0;
    }

    .nav-bar {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 50px;
        z-index: 99;
        background-color: rgba(255, 255, 255, 1);
    }

    .nav-bar ul li {
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

    .nav-bar ul li h2 {
        height: 50px;
        line-height: 50px;
    }
</style>

<body>
<div class="mui-content">
    <div class="nav-bar nav-index fixed">
        <ul class="mui-table-view">
            <li class=" mui-col-xs-2">
                <a href="/iphone/user">返回</a>
            </li>
            <li class=" mui-col-xs-8">
                <h2> 已预约</h2>
            </li>
            <li class=" mui-col-xs-2" id="edit">
                编辑
            </li>
        </ul>
    </div>
    <ul style="margin-top: 50px">
        <li class="mui-table-view-cell mui-media" th:each="receving:${recevingDoList}"
            style="width: 100%">
            <a th:href="'/book/appointment/'+${receving.userId}+'/'+${receving.bookName}" class="mui-col-xs-10" style="float: left">
                <img class="mui-media-object mui-pull-left mui-col-xs-2" style="width: 50px"
                     th:src="${receving.bookImg}">
                <div class=" mui-col-xs-12" style="">
                    <div th:text="${receving.bookName}"
                         class="mui-ellipsis">图书名称
                    </div>
                    <div>
                        <span th:text="${#dates.format(receving.appointTime, 'yyyy-MM-dd')}">预约时间</span></div>
                </div>
            </a>
            <div class="mui-col-xs-2" style="float: left;text-align: right;margin-right: 0px">
                <button th:name="${receving.userId}" th:id="${receving.id}" onclick="del(this)" type="button" class="mui-btn mui-btn-danger">删除</button>
            </div>
        </li>
        <li class="mui-table-view-cell mui-media" th:attr="hidden=(${recevingDoList==null}?false:ture)">
            <a style="height: 85px;">
                <div class="item">
                    <div class="content">
                        还没有预约图书哦@@~
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>
<nav style="

    bottom: 0;
    height: 35px;
    background-color: #fff;
    position: fixed;
    z-index: 10;
    right: 0;
    left: 0;display: none;" id="navbar">
    <button id='confirmBtn1' type="button" class="mui-btn mui-btn-blue mui-btn-outlined" style="width: 50%;float: left">
        取消
    </button>
    <button id='confirmBtn' type="button" class="mui-btn mui-btn-red mui-btn-outlined" style="width: 50%">删除</button>
</nav>
</body>
<div th:include="include::footer"></div>
<script src="/js/phone/mui.min.js"></script>
<script type="text/javascript" th:inline="javascript">
//    function a(obj) {
//        alert('name:'+obj.name+'/id:'+obj.id);
//    }
//    mui.init();
//
//    var nav_bar = document.getElementById('navbar');
//    document.getElementById("edit").addEventListener('tap', function () {
//        nav_bar.style.display = "block";
//    });
//    document.getElementById("confirmBtn1").addEventListener('tap', function () {
//        nav_bar.style.display = "none";
//    });
//    document.getElementById("confirmBtn").addEventListener('tap', function () {
//        var btnArray = ['否', '是'];
//        mui.confirm('确认删除，确认？', '', btnArray, function (e) {
//            if (e.index == 1) {
//                return true;
//            } else {
//                return false;
//            }
//        })
//    });
//删除提示框
    function del(obj) {
        var id=obj.id;
        var userid=obj.name;
//        alert(userid);
        var msg = "您真的确定要删除吗？\n\n请确认！";
        if (confirm(msg)==true){
            $.ajax({
                cache : false,
                type : "Get",
                url : "/iphone/delectYuyue/"+id,
                data:"",
                async : false,
                error : function(request) {
                    parent.layer.alert("Connection error");
                },
                success : function(data) {
                    if (data.code == 0) {
                        parent.layer.msg(data.msg);
                        var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                        window.location.reload();
                        parent.layer.close(index);
                    } else {
                        parent.layer.alert(data.msg)
                    }

                }
            });
            return true;
        }else{
            return false;
        }
    }
</script>

</html>